<template>
  <div class="shop-account-box">
    <el-breadcrumb separator="/" class="ml_5">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-seller fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>B端-商户</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow mt_15">
      <div class="resetBtn" @click="goBack">返回</div>
      <div class="py_5 px_10">
        <el-row>
          <el-col :span="20">
            <el-form
              :inline="true"
              class="form-inline fr"
              @keyup.enter.native="shearchBtn()"
            >
              <el-form-item class="w_130">
                <el-input
                  class="inline-input"
                  v-model="mobile"
                  placeholder="手机号"
                ></el-input>
              </el-form-item>

              <el-form-item class="w_130">
                <el-input
                  class="inline-input"
                  v-model="name"
                  placeholder="姓名"
                ></el-input>
              </el-form-item>
              <el-form-item class="w_130">
                <el-input
                  class="inline-input"
                  v-model="creater_name"
                  placeholder="操作人"
                ></el-input>
              </el-form-item>
              <el-button
                size="mini"
                type="primary"
                native-type="button"
                class="round-right"
                @click="shearchBtn"
                >搜索</el-button
              >
              <el-button size="mini" round @click="resetBtn">重置</el-button>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="tableMaxBox">
        <template>
          <el-table :data="shopList.list" stripe>
            <el-table-column
              prop="id"
              type="index"
              label="序号"
              width="80px"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="role_name"
              label="角色"
              width="100"
            ></el-table-column>
            <el-table-column label="所属店铺" align="center">
              {{ shop_name }}
            </el-table-column>
            <el-table-column
              prop="email"
              label="Email"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="create_name"
              label="操作人"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="create_time"
              label="最后操作时间"
              width="140px"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <div class="set-text" @click="del(row.id)">删除</div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

      <page
        :total="shopList.count"
        :pageNums="pageNum"
        :disableMountedFetch="true"
        @pagedata="onChildValue"
      ></page>
    </div>
  </div>
</template>

<script>
import { getShopUserList, shopDelShopUser } from '@/api/shop.js'
export default {
  name: 'ShopListAccount',
  data() {
    return {
      // rowData: {},
      shopList: [],
      mobile: '',
      name: '',
      creater_name: '',
      pageNum: 1,
      pageSize: 20,
      id: '',
      shop_name: ''
    }
  },
  created() {
    // this.rowData = this.$route.query
    this.id = this.$route.query.id
    this.shop_name = this.$route.query.name

    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      try {
        const res = await getShopUserList({
          shop_id: this.id,
          mobile: this.mobile,
          name: this.name,
          creater_name: this.creater_name,
          page: this.pageNum,
          pageSize: this.pageSize
        })

        this.shopList = res
      } catch (error) {

      }
    },
    // 搜索
    shearchBtn() {
      this.getList()
    },
    // 重置
    resetBtn() {
      this.mobile = ''
      this.name = ''
      this.creater_name = ''

      this.getList()
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
    // 分页
    onChildValue(item) {
      this.pageNum = item[0]
      this.pageSize = item[1]
      this.getList()
    },
    // 删除
    async del(Id) {
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await shopDelShopUser({
            shop_id: this.id,
            id: Id
          })
          this.pageNum = 1
          this.getList()
        } catch (error) {
          console.log('error', error)
        }
      }).catch(() => { });
    }
  }
}
</script>

<style scoped>
.shop-account-box .set-text {
  color: red;
  cursor: pointer;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopListAccount.vue